<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜗牛商城后台管理系统</title>
</head>
<body>
	<!-- 标题栏 -->
	<jsp:include page="header.jsp"></jsp:include>
	<!-- 导航栏 -->
	<jsp:include page="navbar.jsp"></jsp:include>
	<!-- 数据展示 -->
	<div class="col-md-10 text-center panel" id="view">
		<!-- 展示操作路径 -->
		<div class="panel-heading text-left">
			<a href="welcome.jsp">商城管理</a>-><a href="javascript:void(0)">商品管理</a>
		</div>
		<!-- 面板主体 -->
		<div class="panel-body">
			<!-- 表格 -->
			<table class="table table-bordered table-hover table-striped">
				<!-- 表头 -->
				<thead>
					<tr>
						<th class="text-center">序号</th>
						<th class="text-center">名称</th>
						<th class="text-center">价格</th>
						<th class="text-center">图片</th>
						<th class="text-center">库存</th>
						<th class="text-center">类别</th>
						<th class="text-center">创建者账号</th>
						<th class="text-center">创建者昵称</th>
						<th class="text-center">状态</th>
						<th class="text-center">操作</th>
					</tr>
				</thead>
				<!-- 表格主体 -->
				<tbody id="goodsTB">

				</tbody>
				<tfoot id="goodsTF">

				</tfoot>
			</table>
		</div>
		<!-- 新增按钮 -->
		<div class="panel-footer">
			<a href="goodsAdd.jsp" class="btn btn-block btn-info">新增</a>
		</div>
	</div>
	<!-- 版权 -->
	<jsp:include page="footer.jsp"></jsp:include>
</body>
<script type="text/html" id="goodsTable">
{{each goodses goods}}
	<tr>
		<!-- 序号 -->
		<td>{{(pageBean.page-1)*pageBean.pageSize + $index +1}}</td>
		<!-- 名称 -->
		<td>{{goods.gname}}</td>
		<!-- 价格 -->
		<td>￥{{goods.gprice}}</td>
		<!-- 图片 -->
		<td><img src="../{{goods.gpic}}" style='height:60px' /></td>
		<!-- 库存 -->
		<td>{{goods.gstock}}</td>
		<!-- 类别 -->
		<td>{{goods.gtname}}</td>
		<!-- 创建者账号 -->
		<td>{{goods.uaccount}}</td>
		<!-- 创建者昵称 -->
		<td>{{goods.uname}}</td>
		<!-- 状态 -->
		<td>
			{{if goods.gstate==1}}上架
			{{else if goods.gstate==2}}下架
			{{/if}}
		</td>
		<!-- 操作 -->
		<td>
			<a class="btn btn-sm btn-info" href="../goods?opr=initUpdate&gid={{goods.gid}}">修改</a>
			{{if goods.gstate==1}}
				<button type="button" class="btn btn-sm btn-warning" onclick="changeGstate({{goods.gid}},2)">下架</button>
			{{else if goods.gstate==2}}
				<button type="button" class="btn btn-sm btn-warning" onclick="changeGstate({{goods.gid}},1)">上架</button>
			{{/if}}
		</td>
	</tr>
{{/each}}
</script>
<script type="text/html" id="pageBtn">
	<!-- 分页操作按键 -->
	<tr>
		<th colspan="10" class="text-center">
			<button class="btn btn-xs btn-primary" onclick="goPage(1)">首页</button>
			<button class="btn btn-xs btn-primary" onclick="goPage({{page==1?1:page-1}})">上一页</button>
			<button class="btn btn-xs btn-primary" onclick="goPage({{page==totalPage?totalPage:page+1}})">下一页</button>
			<button class="btn btn-xs btn-primary" onclick="goPage({{totalPage}})">末页</button>
			<br> <span>共{{totalPage}}页，现在是第{{page}}页。</span>
		</th>
	</tr>
</script>
<script type="text/javascript">
	let nowPage = 1;

	$(document).ready(function() {
		goPage(nowPage);
	})

	//根据页码返回数据;
	function goPage(page) {
		nowPage = page;
		$.ajax({
			url : "../goods",
			type : "post",
			data : {
				"opr" : "list",
				"page" : page
			},
			dataType : "JSON",
			success : function(result) {
				if (result.msg == "ok") {
					// 通过模板生成商品表					
					let tableHtml = template("goodsTable", {
						goodses : result.list,
						pageBean : result.pageBean
					});
					$("#goodsTB").html(tableHtml);

					// 通过模板生成分页按键表					
					let pageBtnHtml = template("pageBtn", {
						page : result.pageBean.page,
						totalPage : result.pageBean.totalPage
					});
					$("#goodsTF").html(pageBtnHtml);
				} else {
					alert(result.msg);
				}
			}
		})
	}

	//修改商品状态
	function changeGstate(gid, gstate) {
		$.ajax({
			url : "../goods",
			method : "post",
			data : {
				"opr" : "changeGstate",
				"gid" : gid,
				"gstate" : gstate
			},
			dataType : "JSON",
			success : function(result) {
				if (result.msg == "ok") {
					alert("状态已修改");
					goPage(nowPage);
				} else if (result.msg == "null") {
					alert("请重新登录！");
					location.href = "login.jsp";
				} else {
					alert(result.msg);
				}
			}
		})
	}
</script>
</html>
